<template>
	<view class="mine_warp">
		<view class="top_user_info">
			<view class="user_info_head f f_align_center">
				<view class="user_head" @click="$navTo('../setting/setting')">
					<image class="autoImg" :src="userInfo.userHeadUrl" mode=""></image>
				</view>
				<view class="f f_column f_align user_info_msg">
					<view class="f f_align_center">
						<text class="bold userName">{{userInfo.userName}}</text>
						<view class="user_type" v-if="userInfo.vip <= 0">普通用户</view>
						<view class="user_type vip" v-else>vip {{userInfo.vip}}</view>
					</view>
					<view class="">
						邀请码：{{userInfo.invitation}}
					</view>
				</view>
			</view>

			<view class="b_b_gold_warp">
				<view class="b_b_gold f f_align f_align_center">
					<view class="f f_column f_align f_align_center">
						<view class="f f_center f_align_center">
							<view class="i_ico">
								<image class="autoImg" src="/static/user/gold@2x.png" mode=""></image>
							</view> 金币</view>
						<view class="i_number bold">{{userInfo.accountEntity.goldCoinAmount}}</view>
						<view class="i_btn" @click="$navTo('../vip/vip')">充值</view>
					</view>
					<view class="f f_column f_align f_align_center">
						<view class="f f_center f_align_center"><view class="i_ico">
								<image class="autoImg" src="/static/user/card@2x.png" mode=""></image>
							</view> 奖券</view>
						<view class="i_number bold">{{userInfo.accountEntity.raffleTicket}}</view>
						<view class="i_btn" @click="$navTo('../raffle/myLottery')">抽奖</view>
					</view>
					<view class="f f_column f_align f_align_center">
						<view class="f f_center f_align_center"><view class="i_ico">
								<image class="autoImg" src="/static/user/wallet@2x.png" mode=""></image>
							</view> 余额</view>
						<view class="i_number bold">{{userInfo.accountEntity.brokerageAmount}}</view>
						<view class="i_btn" @click="$navTo('../cash/cash')">提现</view>
					</view>
				</view>
			</view>
		</view>

		<view class="user_item_lines">
			<view
				v-for="(item,index) in userItem" :key="index"
				:class="item.step ? 'u_i_item f f_align f_align_center mb' : 'u_i_item f f_align f_align_center'"
				@click="$navTo(item.url)"
			>
				<view class="u_i_item_label f f_align_center">
					<image class="autoImg" :src="item.ico" mode=""></image>
				</view>
				<view :class="item.step ? 'u_i_item_main f f_align f_align_center' : 'u_i_item_main f f_align f_align_center bb'">
					<view class="bold u_i_text">{{item.title}}</view>
					<view class="f f_align_end f_align_center">
						<text class="text_place">{{item.describe}}</text>
						<i class="iconfont u_i_ico">&#xe70a;</i>
					</view>
				</view>
			</view>
		</view>

		<!-- 中间键功能 -->
		<mainBtn />
	</view>
</template>

<script>
	import { mapMutations } from 'vuex';
	import mainBtn from '@/components/mainBtn/mainBtn.vue'
	import { _defaultHead } from '@/utils/util.js'
	export default {
		data() {
			return {
				userItem:[
					{
						title:'邀请有礼',
						describe:'邀一人最高得XX金币',
						ico:'/static/user/yqyl@2x.png',
						step:true,
						url:'../share/share'
					},
					{
						title:'我的团队',
						describe:'',
						ico:'/static/user/wdtd@2x.png',
						step:false,
						url:'../myTeam/myTeam'
					},
					{
						title:'我的发布',
						describe:'',
						ico:'/static/user/wdfb@2x.png',
						step:false,
						url:'../myRelease/myRelease'
					},
					{
						title:'参与任务',
						describe:'',
						ico:'/static/user/cyrw@2x.png',
						step:false,
						url:'../myTask/myTask'
					},
					{
						title:'收益明细',
						describe:'',
						ico:'/static/user/symx@2x.png',
						step:false,
						url:'../incomeDetails/incomeDetails'
					},
					{
						title:'我的关注',
						describe:'',
						ico:'/static/user/wdgz@2x.png',
						step:true,
						url:'../myFollow/myFollow'
					},
					{
						title:'联系导师',
						describe:'',
						ico:'/static/user/lxkf@2x.png',
						step:false,
						url:'../coutact/coutact'
					},
					{
						title:'意见反馈',
						describe:'',
						ico:'/static/user/yjfk@2x.png',
						step:false,
						url:'../feedback/feedback'
					},
					{
						title:'关于我们',
						describe:'',
						ico:'/static/user/gywm@2x.png',
						step:false,
						url:'../aboutUs/aboutUs'
					},
					{
						title:'设置',
						describe:'',
						ico:'/static/user/sz@2x.png',
						step:true,
						url:'../setting/setting'
					}
				],
				userInfo:{
					userName:'--',
					invitation:'--',
					userHeadUrl:'/default/default_user_head.png',
					vip:0,
					accountEntity:{
						brokerageAmount:0, //佣金可提现金额
						raffleTicket:0,    //可充值次数
						goldCoinAmount:0,  //金币数量
					}
				}
			};
		},
		components:{
			mainBtn
		},
		onShow() {
			this.OPEN_MID_BTN(false);
			this.getUserInfo();
		},
		onPullDownRefresh() {
			this.getUserInfo();
		},
		methods: {
			...mapMutations([
				'OPEN_MID_BTN'
			]),
			//获取用户信息哦
			async getUserInfo(){
				const _this = this;
				let res = (await _this.$http('/api/auth/user/getUserInfo','POST',{})).data;
				uni.stopPullDownRefresh();
				console.log(res.data)
				if(res && res.code == '0'){
					let userInfo = res.data;
					_this.userInfo = userInfo;
					uni.setStorageSync('userInfo',userInfo);
				}
			},
			defaultHead(url){
				return _defaultHead(url);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mine_warp{
		width: 100%;
		min-height: 100vh;
		background-color: #F6F6F6;
		padding-bottom: 32rpx;
		.user_item_lines{
			.u_i_item{
				padding: 32rpx 24rpx 0;
				background-color: #fff;
				&.mb{
					margin-bottom: 16rpx;
				}
				.u_i_item_label{
					width: 40rpx;
					height: 40rpx;
					padding-bottom: 32rpx;
				}
				.u_i_item_main{
					width: 662rpx;
					padding-bottom: 32rpx;
					margin-left: 24rpx;
					&.bb{
						border-bottom: solid 1px #E5E5E5;
					}
					.u_i_text{
						font-size: 32rpx;
						color: #000;
					}
					.text_place{
						font-size: 24rpx;
						color: #9B9B9B;
					}
					.u_i_ico{
						color: #24303C;
					}
				}
			}

		}
		.top_user_info{
			box-sizing: border-box;
			padding-top: var(--status-bar-height);
			width: 100%;
			height: 500rpx;
			background:#fff url('/static/image/userbg@2x.png') no-repeat center;
			background-size: 100% 100%;
			position: relative;
			.user_info_head{
				padding: 68rpx 24rpx 60rpx;
				.user_head{
					height: 100rpx;width: 100rpx;
					border: solid 4rpx #fff;
					border-radius: 50%;
					margin-right: 40rpx;
					image{border-radius: 50%;}
				}
				.user_info_msg{
					color: #fff;
					font-size: 28rpx;
					.userName{
						font-size: 40rpx;
						margin-bottom: 4rpx;
					}
					.user_type{
						font-size: 20rpx;
						padding: 2rpx 8rpx;
						border: solid 1rpx #fff;
						border-radius: 8rpx;
						margin-left: 16rpx;
					}
				}
			}
			.user_info_l{
				width: 700rpx;
				height: 180rpx;
				margin:0 auto;
			}
			.b_b_gold_warp{
				width: 100%;
				box-sizing: border-box;
				padding: 0 24rpx;
				position: absolute;
				bottom: 0;
				.b_b_gold{
					box-sizing: border-box;
					padding: 22rpx 73rpx 32rpx;
					width: 100%;
					height: 180rpx;
					background: url('/static/image/bg@2x.png') no-repeat center;
					background-size: 100% 100%;
					color: #C4C7CC;
					font-size: 28rpx;
					.i_ico{
						width: 30rpx;height: 30rpx;
						margin-right: 4rpx;
					}
					.i_number{
						color: #C8B074;
						font-size: 32rpx;
						margin: 8rpx 0;
					}
					.i_btn{
						font-size: 24rpx;
						padding: 1rpx 18rpx;
						border: solid 1rpx #fff;
						border-radius: 16rpx;
						@include flex_center;
					}
				}
			}
		}
	}
</style>
